<template>
  <view class="sur-word" :class="templateData.componentClass === 2 ? 'sur-word_class2' : ''">
  	<view class="man sur-word-item" :style="`color: ${templateData.homophonicWordColor};`">
  		<view :style="`font-family: ${font};`" v-for="(w, index) in manName.Name" :key="index"
  			:class="`text ${index === manName.Index ? 'word-active' : ''}`">
  			{{w}}
        <image class="active-img" :src="templateData.manWordBg" mode="widthFix"></image>
   </view>
  	</view>
  	<view class="female sur-word-item" :style="`color: ${templateData.homophonicWordColor};`">
  		<view :style="`font-family: ${font};`" v-for="(w, index) in femaleName.Name" :key="index"
  			:class="`text ${index === femaleName.Index ? 'word-active' : ''}`">
  			{{w}}
        <image class="active-img" :src="templateData.femaleWordBg" mode="widthFix"></image>
  		</view>
  	</view>
  </view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad,
		onShareAppMessage
	} from '@dcloudio/uni-app';
	const vk = uni.vk;
	const baseUrl = vk.getVuex('$app.config.staticUrl.baseUrl');
  
  let prop = defineProps({
    manName: {
      type: Object,
      default: {}
    },
    femaleName: {
      type: Object,
      default: {}
    },
    font: {
      type: String,
      default: 'qinzi'
    },
    templateData: {
      type: Object,
      default: {}
    }
  })
  
  
  
</script>

<style lang="scss" scoped>
  .sur-word {
  	position: absolute;
  	top: 1em;
  	left: 4em;
    &.sur-word_class2 {
      top: 32px;
      
      .female {
        margin-top: 14px;
      }
    }
  
  	.sur-word-item {
  		display: flex;
  		font-size: 3em;
      color: #75221d;
  
  		.text {
  			margin-left: 15rpx;
  		}
  
  		:first-child {
  			margin-left: 0;
  		}
  	}
  
  	.man {
  		letter-spacing: 2;
  
  		.word-active {
  			position: relative;
  			color: #ffffff;
  			z-index: 0;
  		}
  	}
  
  	.female {
  		padding-left: 1.6em;
  		margin-top: 1.5em;
  
  		.word-active {
  			position: relative;
  			color: #ffffff;
  			z-index: 0;
  		}
  	}
    .active-img {
      position: absolute;
      width: 1.4em;
      z-index: -1;
      left: -0.2em;
      bottom: -0.1em;
    }
  }
</style>